import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { List, InputItem,  Toast, Flex,Icon,Modal,WingBlank,Button,Radio,Steps} from 'antd-mobile';
import {memberCenter} from "./memberCenter.less";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";

const {Item} =List;
const Step = Steps.Step;
const Brief = Item.Brief;


class MemberCenter extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false,
        }
    }

    componentWillMount(){
        this.props.dispatch({type:"member/pointsEFF"});
        this.props.dispatch({type:"member/DetailEFF"});
    }

    showModal = (e) => {
        // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
        // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            visible: true,
        });
    }
    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    refresh = () => {
        return this.props. dispatch({ type: 'member/pointsEFF', obj:{ pageNo:1 } });
    }

    loadMore = () => {
        return this.props. dispatch({ type: 'member/pointsEFF', obj:{ pageNo:this.props.member.filter.pageNo+1 } });
    }

    render() {
        const {pointsList={},dataList={},hasMore} = this.props.member;
        const {avatar=""} =dataList;
        console.log(this.props)
        return (
            <Flex style={{
                height:"100%",
                width:"100%"
            }} direction="column"
                className={memberCenter}
            >
                <NavTopBar title="会员中心" dispatch={this.props.dispatch}/>
                    <div className="memberBg">
                        <WingBlank>
                            <div className="memberDetail" >
                                <NoLazyImg src={avatar}  style={{height:"1.2rem",width:"1.2rem",borderRadius:"100%",position:"absolute",left:"45%",top:"-15%"}} alt=""/>
                                <p style={{textAlign:"right",margin:"0 0 1rem 0"}}>{dataList.storeName}</p>
                            <Steps direction="horizontal" size='small'>
                                    <Step  title="VIP1"  icon={<span className="active"></span>}/>
                                    <Step  title="VIP2"  icon={<span className="active"></span>}/>
                                    <Step  title="VIP3"  icon={<span className="active"></span>}/>
                                    <Step  title="VIP4"  icon={<span className="active"></span>}/>
                                    <Step  title="VIP5"  icon={<span className="active"></span>}/>
                                </Steps>
                                <Flex justify="between" style={{marginTop:"1rem"}}>
                                    <div >可用积分: {dataList.rankPoints}</div>
                                    <div className="jifenmixi" onClick={this.showModal}>积分明细</div>
                                </Flex>
                            </div>
                        </WingBlank>

                    </div>


                <Modal
                    transparent
                    maskClosable={false}
                    visible={this.state.visible}
                    onClose={this.onClose}
                    closable
                    style={{width:"6rem",height:"7.6rem"}}
                >
                       <div style={{textAlign:"center",fontSize:".3rem",color:"#333",paddingBottom:".1rem",borderBottom:"1px solid #999"}}>积分明细</div>
                       <div style={{textAlign:"center",borderBottom:"1px solid #999"}}>
                           <p style={{color:"#ff0036" ,fontSize:".5rem",margin:".1rem 0"}}>{dataList.rankPoints}</p>
                           <p style={{marginBottom:".1rem"}}>当前剩余积分</p>
                       </div>
                    <MyListView
                        style={{height: '80%'}}
                        refresh={ this.refresh }
                        loadMore={ this.loadMore }
                        hasMore={ hasMore }
                        renderItem={(value,i,a)=>{
                            return (

                                    <List.Item key={i} extra={<span style={{color:"#44b90a"}}>{"+"+value.points}</span>}>{value.stage} <Brief>2017-07-21 15:08:13</Brief>     </List.Item>
                            )
                        }}
                        data={ pointsList.list }>
                    </MyListView>
                </Modal>
            </Flex>
        );
    }
}

export default connect(({ member }) => ({ member }))(MemberCenter);
